 <!-- 预报图展 -->
<template>
	<transition name="show">
		<div class="meteo">
			<div class="my-wrap">
				<div class="main">
					<mt-swipe :auto="5000">
					    <mt-swipe-item>
							<img src="./a.gif">
					    </mt-swipe-item>
					    <mt-swipe-item>
							<img src="./b.gif">
					    </mt-swipe-item>
					    <mt-swipe-item>
							<img src="./c.gif">
					    </mt-swipe-item>
					    <mt-swipe-item>
							<img src="./d.gif">
					    </mt-swipe-item>
					    <mt-swipe-item>
							<img src="./e.gif">
					    </mt-swipe-item>
					</mt-swipe>
				</div>
			</div>
			<open-close @getGis="getGIS"></open-close>
		</div>
	</transition>
</template>


<script>

import openClose from '../openClose/openClose'    // 弹出层打开关闭按钮

export default {
	components: {   // 组件
		openClose
	},
	methods: {
		getGIS(){  // 确定单击渲染GIS
			console.log("预报图展")
		}
	}
}

</script>

<style lang="less" scoped>
.show-enter{
	transform: translateX(100%);
	opacity: 0;
}
.show-enter-to{
	transform: translateX(0%);
	opacity: 1;
}
.show-leave{
	transform: translateX(0%);
	opacity: 1;
}
.show-leave-to{
	transform: translateX(-100%);
	opacity: 0;
}

.show-enter-active,.show-leave-active{
    transition: all 0.5s;
}

.meteo{
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	z-index: 101;
	overflow: hidden;
	.my-wrap{
		height: calc(~"100% - 130px");
		overflow: hidden;
		.main{
			height: 100%;
			text-align: center;
			box-sizing: border-box;
			padding: 80px 20px 0 20px;
			img{
				width: 100%;
				border-radius: 6px;
			}
		}
	}
}


</style>